<script setup>
import NameIcon from "./components/formdesigner/NameIcon.vue";
//开发测试方式
import FormDesigner from "./components/formdesigner/FormDesigner.vue"

const customForm = defineModel("customForm")

// 
let uploadOptions = {
  action: 'http://localhost:8888/api/Common/UploadFile',
  getHeaders: function () {
    return { 'token': '123' };
  },
  getFileHook: (res) => {
    if (res.success) {
      return {
        name: res.result.url.substr(res.result.url.lastIndexOf('/') + 1),
        url: res.result.url
      };
    } else {
      return res.msg;
    }
  }
}

let controlGroups = [
  {
    name: '基础组件',
    controls: ['input', 'textarea', 'inputnumber', 'select', 'radio', 'checkbox',
      'date', 'time', 'switch', 'text', 'divider'],
  },
  {
    name: '高级组件',
    controls: ['upload', 'uploadImage', 'region', 'cascader']
  },
];

//自定义组件
const customComponents = []

// 英文值下拉数据，如果有长度，则是下拉，没有该数据则是输入框
const enData = {
  label: 'label',//指定显示的key
  value: 'value',//指定v-model的key
  options: [
    { label: '选择1', value: '1' },
    { label: '选择2', value: '2' },
    { label: '选择3', value: '3' }
  ]//数据集合
}

//自定义表单项按钮点击事件
function itemCustomButtonClick(element) {
  console.log(element)
}

//删除表单元素
const deleteItem = (data) => {
  console.log('删除表单元素：', data)
}
//复制表单元素
const copyItem = (data) => {
  console.log('复制表单元素：', data)
}
</script>

<template>

  <div class="h-full">
    <FormDesigner :enData="enData" v-model:controlGroups="controlGroups" :uploadOptions="uploadOptions"
      :customComponents="customComponents" v-model:customForm="customForm" @deleteItem="deleteItem"
      @copyItem="copyItem">
      <!-- <template #button>
        <el-button text type="primary" @click="releaseForm">
          <el-icon>
            <NameIcon name="save" />
          </el-icon>
          <span>保存</span>
        </el-button>
      </template> -->
      <template #action="{ data }">
        <el-icon @click.stop="itemCustomButtonClick(data)">
          <NameIcon name="move" style="color:white"></NameIcon>
          <!-- <NameIcon name="editor" style="color:#fff"></NameIcon> -->
        </el-icon>
      </template>
    </FormDesigner>
  </div>
</template>

<style scoped>
.h-full {
  width: 100%;
  height: calc(100% - 50px);
  /* width: calc(100vw - 215px);
  height: calc(100vh - 120px); */
  /* overflow-y: scroll */
}
</style>
